<script lang="ts" setup>
import { ref } from 'vue';

const scrollbar = ref();
const height = ref(0);

const onScroll = ({ scrollTop }) => {
  height.value = scrollTop;
};
</script>

<template>
  <el-container class="home-layout">
    <el-header><slot name="header" /></el-header>
    <el-main>
      <el-scrollbar ref="scrollbar" @scroll="onScroll">
        <slot />
      </el-scrollbar>
      <el-button
        v-if="height > 500"
        class="back-top"
        size="large"
        @click="scrollbar.scrollTo(0, 0)"
        circle
      >
        <a-icon :size="24" name="backtop" />
      </el-button>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.home-layout {
  width: 100vw;
  height: 100vh;
  .el-header,
  .el-main {
    padding: 0;
  }
  .back-top {
    position: fixed;
    right: 40px;
    bottom: 40px;
    z-index: 1;
    box-shadow: var(--el-box-shadow-light);
  }
}
</style>
